<template>
	<h2>CustomRef的使用</h2>
	<input type="text" v-model="keyword" />
</template>

<script lang="ts">
import { customRef, defineComponent, ref } from "vue"

// 自定义hook防抖的函数
// value传入的数据，将来数据类型不确定，所以用泛型，delay防抖的间隔时间，默认为200毫秒
function useDebouncedRef<T>(value: T, delay = 200) {
	// 准备一个存储定时器id的变量
	let timeOutId: number
	return customRef((track, trigger) => {
		return {
			// 返回数据的
			get() {
				// 告诉vue追踪数据
				track()
				return value
			},
			set(newValue: T) {
				// 开启定时器
				setTimeout(() => {}, delay)
			}
		}
	})
}

export default defineComponent({
	name: "App",
	setup(props) {
		// const keyword = ref("abc")
		const keyword = useDebouncedRef("abc", 500)
		return {
			keyword
		}
	}
})
</script>

<style></style>
